
import React, { Component } from 'react';
import '../styles/Myheader2.scss'

class MyHeader2 extends Component {
    constructor(props){
        super(props)
        this.state={
            headerlist:[
                {text:'综合'},
                {text:'销量'},
                {text:'新品'},
                {text:'价格'},
                {text:'筛选'},
            ],
            spanindex:0
        }
    }
    spanclick(index){
        this.setState({ spanindex:index })

    }
    render() {
        return (
            <div className='header' >
                   <p>全部商品</p>
                  <div className="input-box">
                       <span className='iconfont icon-fangdajing' ></span>
                      <input type="text" placeholder='搜索店内商品'/>
                  </div>
                    <div className="headerlist">
                    {   
                    this.state.headerlist.map((item,index)=>{
                        return(
                            <span className={ this.state.spanindex==index ? 'active':'' }  onClick={ ()=>{ this.spanclick(index) } }   key={index} >{item.text}</span>
                        )
                    })
                    }
                    </div>
            </div>
        );
    }
}

export default MyHeader2;